<template>
  <chart-card :loading="loading" title="关注用户" :total="total | NumberFormat">
    <a-tooltip title="收藏店铺的用户" slot="action">
      <a-icon type="info-circle-o"/>
    </a-tooltip>
    <div>
      <div class="antv-chart-mini">
        <div class="chart-wrapper" :style="{ height: 46 }">
          <v-chart :force-fit="true" :height="height" :data="targetEntityData" :padding="[36, 0, 18, 0]">
            <v-tooltip/>
            <v-smooth-area position="x*y"/>
          </v-chart>
        </div>
      </div>
    </div>
    <template slot="footer">近一月新增<span> {{ monthCount | NumberFormat }}</span></template>
  </chart-card>
</template>

<script>
  import moment from 'moment'
  import { ChartCard} from '@/components'
  const tooltip = [
    'x*y',
    (x, y) => ({
      name: x,
      value: y
    })
  ]
  const scale = [{
    dataKey: 'x',
    min: 2
  }, {
    dataKey: 'y',
    title: '时间',
    min: 1,
    max: 22
  }]

  export default {
    name: 'ProductScMiniArea',
    components: {
      ChartCard
    },
    data() {
      return {
        targetEntityData: [],
        tooltip: '',
        total:0,
        loading: true,
        monthCount:0,
        scale,
        height: 100
      }
    },
    methods: {
      totalByTargetEntity() {
        this.http.get(this, {
          url: this.api.collecon.totalByTargetEntity,
          data: {},
          success: function(me, data) {
            me.targetEntityData = data.list
            me.monthCount = data.monthCount
            me.total = data.totalCount
          }
        })
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.totalByTargetEntity()
    }
  }
</script>

<style lang="less" scoped>
  @import "chart";
</style>
